<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/json-viewer/json-viewer.html">
<link rel="import" href="../../bower_components/xml-viewer/xml-viewer.html">

<dom-module id="element-for-in">
    <template>
        <style include="shared-styles info-table-style">
        :host {
            font-size: 14px;
        }

        .flex-horizontal-with-ratios {
            @apply --layout-horizontal;
        }

        .flexchild {
            @apply --layout-flex;
            padding: 16px;
        }

        .flexchild.key {
            font-weight: 500;
        }

        .flex-horizontal-with-ratios:nth-child(even){
            background-color: #f2f2f2;
        }

        :host div {
            word-break: break-all;
        }
        </style>
        <div id="infobody" class="info-body"></div>
    </template>
    <script>
    Polymer({
        is: 'element-for-in',
        properties: {
            content: {
                type: Object,
                value: {},
                observer: '_contentChanged'
            },
            ignore: {
                type: String
            }
        },
        _contentChanged: function(newValue, oldValue) {
            var newObj = [],
                el,
                obj = newValue;

            // check if not empty the container object
            if (obj && Object.keys(obj).length > 0) {
                // loop through pairs
                for (el in obj) {
                    if (obj[el]) {
                        newObj.push({
                            key: el,
                            value: obj[el]
                        });
                    }
                }

                this.sortArr(newObj);
            }

            this.$.infobody.innerHTML = this.createTpl(newObj);
        },
        sortArr: function(array) {
            array.sort(function(a, b) {
                var x = a.key;
                var y = b.key;
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            });
        },
        createTpl: function(content) {
            function replaceURLWithHTMLLinks(text) {
                // console.log('createTpl',text);
                if (!text.replace)
                    return text;
                var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
                return text.replace(exp, "<a href='$1' target='new'>$1</a>");
            }
            function unescapeHtml(unsafe) {
                return unsafe
                    .replace(/&amp;/g, "&")
                    .replace(/&lt;/g, "<")
                    .replace(/&gt;/g, ">")
                    .replace(/&quot;/g, "\"")
                    .replace(/&#039;/g, "'");
            }
            var tpl = '';

            for (var i = 0, len = content.length; i < len; i++) {
                if (this.ignore && content[i].key.indexOf(this.ignore) > -1) {
                    continue;
                }
                tpl += "<div class='info-item flex-horizontal-with-ratios'>";
                tpl += "<div class='flexchild key'>" + this.processKeys(content[i].key) + "</div>";
                // if value is an array
                if (content[i].value instanceof Object || content[i].value instanceof Array) {
                    tpl += "<div class='flexchild' style='width: 70%'><json-viewer json='" + JSON.stringify(content[i].value) + "'></json-viewer></div>";
                }
                // if key is password
                else if (content[i].key.indexOf("password") > -1) {
                    tpl += "<div class='flexchild'>" + content[i].value.replace('<', '&lt;').replace('>', '&gt;') + "</div>";
                }
                // if key is state
                else if (content[i].key.indexOf("power_state") > -1 && content[i].value == 1) {
                    tpl += "<div class='flexchild'>running</div>";
                }
                else {
                    try {
                        var parserOutputType = new window.DOMParser().parseFromString(unescapeHtml(content[i].value), "text/xml").documentElement.nodeName;
                        if (parserOutputType == 'html') {
                            tpl += "<div class='flexchild'>" + replaceURLWithHTMLLinks(content[i].value) + "</div>";
                        } else if (parserOutputType != 'parsererror'){
                            tpl += "<div class='flexchild'><xml-viewer xml='" + content[i].value.replace(/'/g, '"') + "'></xml-viewer></div>";
                        } else {
                            tpl += "<div class='flexchild'>" + replaceURLWithHTMLLinks(content[i].value) + "</div>";    
                        }
                    } catch (e) {
                        tpl += "<div class='flexchild'>" + replaceURLWithHTMLLinks(content[i].value) + "</div>";
                    }
                }
                tpl += "</div>";
            }

            return tpl;
        },
        createObjTpl: function(obj) {
            var tpl = '';
            // console.log(obj)
            if (obj) {
                for (var p in obj) {
                    tpl += "<div class='info-item'><pre><code>" + YAML.dump(obj[p]) + "</code></pre></div>";
                }
            }
            return tpl;
        },
        processKeys: function(str) {
            var words = str.split('_'),
                result = '',
                gap, word;
            for (var i = 0, len = words.length; i < len; i++) {
                gap = i == 0 ? '' : ' ';
                word = this.toTitleCase(words[i]);
                result += gap.concat(word);
            }
            return result;
        },
        toTitleCase: function(str) {
            return str.replace(/\w\S*/g, function(txt) {
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            });
        }
    });
    </script>
</dom-module>